<template>
    <div style="background-color: #00000000; width: 600px; height: 550; ">
        <el-scrollbar style="  width: 500px; height: 500px" tag="ul">
            <el-timeline>
                <!-- 选择一个合适的时间线界面，未来持续更新该界面 -->
                <el-timeline-item timestamp="2022/11/7" placement="top" style=" width: 400px;">
                    <el-card class=" bg-yellow-50">
                        <h4>
                            <svg t="1667836845948" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2504" width="25" height="25">
                                <path
                                    d="M646.4512 627.5584m-298.1888 0a298.1888 298.1888 0 1 0 596.3776 0 298.1888 298.1888 0 1 0-596.3776 0Z"
                                    fill="#C7ACEF" p-id="2505"></path>
                                <path
                                    d="M467.6096 962.5088c-34.4064 0-68.7616-13.1072-94.976-39.2704l-276.48-276.48c-52.3776-52.3776-52.3776-137.5744 0-189.9008L465.4592 87.552a105.216 105.216 0 0 1 76.8512-30.6176l308.6336 8.3456c55.3472 1.4848 100.096 46.0288 101.7856 101.376l9.5744 310.1696c0.8704 28.7744-10.2912 56.9344-30.6176 77.2608l-369.2032 369.2032c-26.112 26.112-60.4672 39.2192-94.8736 39.2192z m71.8848-844.1856c-11.4176 0-22.4768 4.5568-30.5664 12.6464L139.6224 500.2752c-28.416 28.416-28.416 74.6496 0 103.0144l276.48 276.48c28.416 28.416 74.6496 28.416 103.0144 0l369.2032-369.2032a43.4176 43.4176 0 0 0 12.6464-31.8976l-9.5744-310.1696c-0.7168-22.8864-19.2-41.2672-42.0352-41.8816l-308.6336-8.3456c-0.4608 0.0512-0.8192 0.0512-1.2288 0.0512z"
                                    fill="#4F4F4F" p-id="2506"></path>
                                <path
                                    d="M676.4032 445.5424c-62.208 0-112.8448-50.6368-112.8448-112.8448s50.6368-112.8448 112.8448-112.8448c62.208 0 112.8448 50.6368 112.8448 112.8448s-50.6368 112.8448-112.8448 112.8448z m0-164.1984c-28.3648 0-51.4048 23.04-51.4048 51.4048s23.04 51.4048 51.4048 51.4048c28.3648 0 51.4048-23.04 51.4048-51.4048s-23.0912-51.4048-51.4048-51.4048z"
                                    fill="#4F4F4F" p-id="2507"></path>
                            </svg>

                            选择一个合适的时间线界面，未来持续更新该界面
                        </h4>
                        <p class="text-xs ">Yu committed 2022/11/7 23:59</p>
                    </el-card>
                </el-timeline-item>
                <!-- 完成整体的半透明化 -->
                <el-timeline-item timestamp="2022/11/6" placement="top" style=" width: 400px;">
                    <el-card class=" bg-pink-50">
                        <h4><svg t="1667833720601" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1494" width="25" height="25">
                                <path
                                    d="M579.4304 575.1808m-281.4464 0a281.4464 281.4464 0 1 0 562.8928 0 281.4464 281.4464 0 1 0-562.8928 0Z"
                                    fill="#C0E1C6" p-id="1495"></path>
                                <path
                                    d="M515.328 958.976c-247.1424 0-448.2048-201.0624-448.2048-448.2048s201.0624-448.2048 448.2048-448.2048 448.2048 201.0624 448.2048 448.2048c-0.0512 247.1936-201.1136 448.2048-448.2048 448.2048z m0-834.9184c-213.248 0-386.7648 173.5168-386.7648 386.7648 0 213.248 173.5168 386.7648 386.7648 386.7648s386.7648-173.5168 386.7648-386.7648c-0.0512-213.2992-173.5168-386.7648-386.7648-386.7648z"
                                    fill="#4F4F4F" p-id="1496"></path>
                                <path
                                    d="M458.4448 679.3216c-15.0528 0-29.5936-6.2464-39.936-17.2544L312.2176 549.376a30.73024 30.73024 0 0 1 1.28-43.4176 30.73024 30.73024 0 0 1 43.4176 1.28l101.4784 107.52 208.7936-229.1712a30.69952 30.69952 0 0 1 43.4176-1.9968 30.69952 30.69952 0 0 1 1.9968 43.4176l-213.5552 234.3936c-10.24 11.264-24.8832 17.7664-40.0896 17.92h-0.512z"
                                    fill="#4F4F4F" p-id="1497"></path>
                            </svg>
                            完成整体的半透明化，透明控表示真的很赞，着实喜欢到了</h4>
                        <p class="text-xs">Yu committed 2022/11/6 23:48</p>
                    </el-card>
                </el-timeline-item>

                <!-- 名片写完啦 -->
                <el-timeline-item  timestamp="2022/11/5" placement="top" style=" width: 400px;">
                    <el-card class="bg-sky-50">
                        <h4><svg t="1667833720601" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1494" width="25" height="25">
                                <path
                                    d="M579.4304 575.1808m-281.4464 0a281.4464 281.4464 0 1 0 562.8928 0 281.4464 281.4464 0 1 0-562.8928 0Z"
                                    fill="#C0E1C6" p-id="1495"></path>
                                <path
                                    d="M515.328 958.976c-247.1424 0-448.2048-201.0624-448.2048-448.2048s201.0624-448.2048 448.2048-448.2048 448.2048 201.0624 448.2048 448.2048c-0.0512 247.1936-201.1136 448.2048-448.2048 448.2048z m0-834.9184c-213.248 0-386.7648 173.5168-386.7648 386.7648 0 213.248 173.5168 386.7648 386.7648 386.7648s386.7648-173.5168 386.7648-386.7648c-0.0512-213.2992-173.5168-386.7648-386.7648-386.7648z"
                                    fill="#4F4F4F" p-id="1496"></path>
                                <path
                                    d="M458.4448 679.3216c-15.0528 0-29.5936-6.2464-39.936-17.2544L312.2176 549.376a30.73024 30.73024 0 0 1 1.28-43.4176 30.73024 30.73024 0 0 1 43.4176 1.28l101.4784 107.52 208.7936-229.1712a30.69952 30.69952 0 0 1 43.4176-1.9968 30.69952 30.69952 0 0 1 1.9968 43.4176l-213.5552 234.3936c-10.24 11.264-24.8832 17.7664-40.0896 17.92h-0.512z"
                                    fill="#4F4F4F" p-id="1497"></path>
                            </svg>
                            写主页名片真不戳，有点好看哎</h4>
                        <p class="text-xs">Yu committed 2022/11/5 19:36</p>
                    </el-card>
                </el-timeline-item>


                <el-timeline-item timestamp="2022/11/3" placement="top" style=" width: 400px;">
                    <el-card class="bg-green-50">
                        <h4><svg t="1667833720601" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1494" width="25" height="25">
                                <path
                                    d="M579.4304 575.1808m-281.4464 0a281.4464 281.4464 0 1 0 562.8928 0 281.4464 281.4464 0 1 0-562.8928 0Z"
                                    fill="#C0E1C6" p-id="1495"></path>
                                <path
                                    d="M515.328 958.976c-247.1424 0-448.2048-201.0624-448.2048-448.2048s201.0624-448.2048 448.2048-448.2048 448.2048 201.0624 448.2048 448.2048c-0.0512 247.1936-201.1136 448.2048-448.2048 448.2048z m0-834.9184c-213.248 0-386.7648 173.5168-386.7648 386.7648 0 213.248 173.5168 386.7648 386.7648 386.7648s386.7648-173.5168 386.7648-386.7648c-0.0512-213.2992-173.5168-386.7648-386.7648-386.7648z"
                                    fill="#4F4F4F" p-id="1496"></path>
                                <path
                                    d="M458.4448 679.3216c-15.0528 0-29.5936-6.2464-39.936-17.2544L312.2176 549.376a30.73024 30.73024 0 0 1 1.28-43.4176 30.73024 30.73024 0 0 1 43.4176 1.28l101.4784 107.52 208.7936-229.1712a30.69952 30.69952 0 0 1 43.4176-1.9968 30.69952 30.69952 0 0 1 1.9968 43.4176l-213.5552 234.3936c-10.24 11.264-24.8832 17.7664-40.0896 17.92h-0.512z"
                                    fill="#4F4F4F" p-id="1497"></path>
                            </svg>
                            完成对Login界面的编写(教程讲的奇奇怪怪，手写完了，脑子看不懂)</h4>
                        <p class="text-xs">Yu committed 2022/11/3 23:07</p>
                    </el-card>
                </el-timeline-item>


                <el-timeline-item icon=MoreFilled timestamp="2022/11/1" placement="top" style=" width: 400px;">
                    <el-card class="bg-orange-50  ">
                        <span>
                            <svg t="1667834233368" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2194" width="25" height="25">
                                <path
                                    d="M653.5168 621.4656m-281.4464 0a281.4464 281.4464 0 1 0 562.8928 0 281.4464 281.4464 0 1 0-562.8928 0Z"
                                    fill="#F6EEA5" p-id="2195"></path>
                                <path
                                    d="M513.7408 791.3472c-69.888 0-126.7712-56.8832-126.7712-126.7712s56.8832-126.7712 126.7712-126.7712c69.888 0 126.7712 56.8832 126.7712 126.7712s-56.8832 126.7712-126.7712 126.7712z m0-192.0512c-35.9936 0-65.3312 29.2864-65.3312 65.3312s29.2864 65.3312 65.3312 65.3312c35.9936 0 65.3312-29.2864 65.3312-65.3312s-29.3376-65.3312-65.3312-65.3312z"
                                    fill="#4F4F4F" p-id="2196"></path>
                                <path
                                    d="M785.0496 355.7888H332.0832V289.792c0-100.1472 81.5104-181.6576 181.6576-181.6576 92.5696 0 170.1888 69.2736 180.48 161.0752a30.72 30.72 0 0 0 33.9456 27.0848 30.72 30.72 0 0 0 27.0848-33.9456c-13.824-122.9312-117.6576-215.7056-241.5616-215.7056-134.0416 0-243.0976 109.056-243.0976 243.0976v65.9968h-28.2112c-90.3168 0-163.84 73.5232-163.84 163.84v289.8944c0 90.3168 73.5232 163.84 163.84 163.84h542.6176c90.3168 0 163.84-73.5232 163.84-163.84v-289.8944c0.0512-90.2656-73.472-163.7888-163.7888-163.7888z m102.4 453.7344c0 56.4736-45.9264 102.4-102.4 102.4H242.432c-56.4736 0-102.4-45.9264-102.4-102.4v-289.8944c0-56.4736 45.9264-102.4 102.4-102.4h542.6176c56.4736 0 102.4 45.9264 102.4 102.4v289.8944z"
                                    fill="#4F4F4F" p-id="2197"></path>
                            </svg>
                            Vue学习开始!</span>
                        <h2 class="text-xs">Yu committed 2022/11/1 20:46</h2>
                    </el-card>
                </el-timeline-item>

            </el-timeline>
        </el-scrollbar>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const count = ref(0)
const load = () => {
    count.value += 2
}
</script>
  
<style>
.infinite-list {
    height: 550px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);

}

.infinite-list .infinite-list-item+.list-item {
    margin-top: 10px;
}

/* 修改默认的滚动条样式 */

.el-timeline .el-timeline-item .el-timeline-item__wrapper .el-timeline-item__timestamp {
                color: #000000;
}        
        
    

</style>